<template>
  <div class="lookPatentOrder">
    <!-- 查看订单弹出框 -->
		<el-dialog @open='openLook' 
      center :modal='false' 
      :visible.sync="showRefund3" 
      class='lookOrder' 
      width='800px' 
      :destroy-on-close='true'
      :modal-append-to-body="true">
      <el-steps :active="opDateMax" align-center finish-status="success" :process-status='step_type'>
        <el-step v-for="(item,index) in stepsText" :key='index' :title="item" description="">
        </el-step>
      </el-steps>
			<el-row :gutter="24">
				<el-col :span="24">
          <el-collapse accordion >
            <!-- <el-collapse-item title='退回留言' name='1'>

              <el-timeline class= 'messageList' v-if=" orderDetails.operations && orderDetails.operations.length">
                <el-timeline-item
                  v-for="(item, index) in orderDetails.operations"
                  :key="index"
                  :timestamp="item.created_at"
                >
                  <el-card class="messagebox">
                    <Tooltip content="点我回复" class="fr" >
                      <i class="el-icon-chat-dot-round leaveWord ml5" @click="showTextarea(item, index)"></i>
                    </Tooltip>
                    <div class="agent_item clearfloat" v-if="item.role_id == '2'">
                      <span class="item_user fr">代理人</span>
                      <span class="item_time fr">{{item.created_at}}</span>
                      <div class="item_message messageBackground_r fr">
                        <span>{{item.operation_record}}</span>
                      </div>
                    </div>
                    <div v-else class="item">
                      <span class="item_time">{{item.created_at}}</span>
                      <span class="item_user">发明人</span>
                      <div class="item_message messageBackground_l">
                        <span>{{item.operation_record}}</span>
                      </div>
                    </div>
                    <div v-for="(agent, index2) in item.reply_message" :key="index2">
                      <div class="agent_item clearfloat" v-if="agent.role_id == '2'">
                        <span class="item_user fr">代理人</span>
                        <span class="item_time fr">{{agent.created_at}}</span>
                        <div class="item_message messageBackground_r fr">
                          <span>{{agent.operation_record}}</span>
                        </div>
                      </div>
                      <div v-else class="item">
                        <span class="item_time">{{agent.created_at}}</span>
                        <span class="item_user">发明人</span>
                        <div class="item_message messageBackground_l">
                          <span>{{agent.operation_record}}</span>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.show_input" class="clearfloat mt20">
                      <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="replyMessage"></el-input>
                      <el-button class="fr mt10" type="primary" @click="submit(item)">发送</el-button>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <p v-else class="tc">
                暂无数据
              </p>
            </el-collapse-item> -->
            <el-collapse-item title='订单详情' name='1'>
            <el-form :model="orderDetails" ref="lookorderDialog" label-width="120px" class='lookeOerderFrom'>
						<el-row type="flex">
							<el-col :span="24">
								<el-form-item  style="border-bottom: 0;" label="专利名称：">{{ orderDetails.name }}</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item  label="专利类型：">{{ orderDetails.type== "S" ? '实用新型' : orderDetails.type== "W" ? "外观设计" : '发明专利' }}</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="订单编号：">{{ orderDetails.order_number }}</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="状态：">
									<font :class='orderDetails.status == "撤案" ? "fontRed" : "fontgreen"'>{{ orderDetails.status }}</font>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="代理人：">
									<span class="fontgreen" v-if='orderDetails.order && orderDetails.agent'>{{ orderDetails.agent.email_work.split("@")[0].slice(-3) }}号</span>
									<span v-else ></span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="专属顾问：">
									<span  class="fontgreen" v-if='orderDetails.order'>{{ orderDetails.process.email_work.split("@")[0].split("followup")[1] + '号' }}</span>
									<span v-else ></span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="专利权人：">
                  <template v-if='orderDetails.order'>
                    {{ orderDetails.order.patent_user }}
                  </template>
                </el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="12">
								<el-form-item label="发明人：">
                  <template v-if='orderDetails.order'>
                    {{ orderDetails.order.user_name }}
                  </template>
                </el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="身份证号：">
                  <template v-if='orderDetails.order'>
                    {{ orderDetails.order.id_card }}
                  </template>
                </el-form-item>
							</el-col>
						</el-row>
						<el-row type="flex">
							<el-col :span="6">
								<el-form-item style="border-bottom: 0;" label="联络人：" >
                  <template v-if='orderDetails.order'>
                    {{ orderDetails.order.liaisons }}
                  </template>
                </el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item style="border-bottom: 0;" label="联络人邮箱：">
                  <template v-if='orderDetails.order'>
                    {{ orderDetails.order.liaisons_email }}
                  </template>
                </el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="border-bottom: 0;" label="联络人电话：">
                  <template v-if='orderDetails.order'>
                    {{ orderDetails.order.liaisons_tel }}
                  </template>
                </el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="技术领域：" style="border-bottom-width: 0px;">
              <template v-if='orderDetails.order'>
                {{ orderDetails.order.territory }}
              </template>
              </el-form-item>
						<el-form-item label="技术背景：" style="border-bottom-width: 0px;">
              <template v-if='orderDetails.order'>
                {{ orderDetails.order.background }}
              </template>
              </el-form-item>
						<el-form-item label="技术问题：" style="border-bottom-width: 0px;">
              <template v-if='orderDetails.order'>
                {{ orderDetails.order.problem }}
              </template>
            </el-form-item>
						<el-form-item label="技术方案：" style="border-bottom-width: 0px;">
              <template v-if='orderDetails.order'>
                {{ orderDetails.order.plan }}
              </template>
              </el-form-item>
						<el-form-item label="项目优势：" style="border-bottom-width: 0px;">
              <template v-if='orderDetails.order'>
                {{ orderDetails.order.advantage }}
              </template>
              </el-form-item>
						<el-form-item label="具体实施方式：">
              <template v-if='orderDetails.order'>
                {{ orderDetails.order.way }}
              </template>
            </el-form-item>
						<!-- <div v-if="scope.row.update_records && scope.row.update_records.length" class="more">{{scope.row.update_records[0].review}}</div> -->
						<el-form-item v-if="orderDetails.status == '撤案'" label="撤案原因：">
							<font v-if="orderDetails.order && orderDetails.order.update_records.length > 0" color='red'>{{ orderDetails.order.update_records[0].review }}</font>
						</el-form-item>
						<el-row type="flex">
							<el-col :span="12" >
								<el-form-item label="附图：" style="border-bottom-width: 0px;">
									<div v-if="orderDetails.order != null" class="file-box">
										<pre-img
                      :smallImg="orderDetails.imgList"
                      :bigImg="orderDetails.imgList2"
                      class="pre-img">
                    </pre-img>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<!-- <span>附件：</span>
								<span v-if='orderDetails.file'>{{ orderDetails.file }}</span>
								<span v-else>&nbsp;</span> -->
								<el-form-item label="附件：" style="border-bottom-width: 0px;">
									<div class="file-box" v-if="orderDetails.order">
											<a v-for="item in orderDetails.order.fileArr" :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
											:download="item.path" :title="item.path" class="el-icon-tickets file_sh"></a>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
            <el-row v-if="orderDetails.grades">
              <el-col :span="12">
                <el-form-item label="服务态度：" style="border-bottom-width: 0px;" class="flex-form">
                  <el-rate
                    disabled
                    show-score
                    allow-half
                    :value="orderDetails.grades.attitude">
                  </el-rate>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="撰写质量：" style="border-bottom-width: 0px;" class="flex-form">
                  <el-rate
                    disabled
                    show-score
                    allow-half
                    :value="orderDetails.grades.quelity">
                  </el-rate>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="orderDetails.grades">
              <el-col :span="24">
                <el-form-item label="撰写耗时：" style="border-bottom-width: 0px;" class="flex-form">
                  <el-rate
                    disabled
                    show-score
                    allow-half
                    :value="orderDetails.grades.take_time">
                  </el-rate>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="orderDetails.grades">
              <el-col :span="24">
                <el-form-item label="评价：" style="border-bottom-width: 0px;">
                  {{orderDetails.grades.remark}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!--  @click.stop='stopPopup' -->
                <el-form-item label="授权通知书：" style="border-bottom-width: 1px;" v-if='orderDetails.status == "授权"'>
                  <div class="file-box" v-if="orderDetails.opinion_file">
                    <a v-for="item in orderDetails.reviewFile"
                      :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
                      :download="item.path" :title="item.path" class="icon-fileload"></a>
                  </div>
                </el-form-item>
                <el-form-item label="驳回通知书：" style="border-bottom-width: 1px;" v-else-if='orderDetails.status == "驳回"'>
                  <div class="file-box" v-if="orderDetails.opinion_file">
                    <a v-for="item in orderDetails.reviewFile"
                      :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
                      :download="item.path" :title="item.path" class="icon-fileload"></a>
                  </div>
                </el-form-item>
                <el-form-item label="专利证书：" style="border-bottom-width: 1px;" v-else-if='orderDetails.status == "下证"'>
                  <div class="file-box" v-if="orderDetails.cert_file">
                    <a v-for="item in orderDetails.certFiles"
                      :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
                      :download="item.path" :title="item.path" class="icon-fileload"></a>
                  </div>
                </el-form-item>
                <!--  class="el-icon-tickets file_sh" -->
                <el-form-item label="答复/补正文件：" style="border-bottom-width: 1px;" v-else>
                  <div class="file-box" v-if="orderDetails.opinion_file">
                    <a v-for="item in orderDetails.reviewFile"
                      :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
                      :download="item.path" :title="item.path" class="icon-fileload"></a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row type="flex" justify="center" class="mt10" v-if="orderDetails.status != '撤案'">
              <div style="display:'inline-bloc;'"  v-if="orderDetails.opinion_file && (orderDetails.status == '发明人确认答复中') || (orderDetails.status == '发明人确认补正中')">
                <el-button v-no-more-click:3000 size="small" type="primary" @click="confirmFishFile('confirm', orderDetails)">{{ orderDetails.status.slice(-3) == '答复中' ? '确认答复' : '确认补正' }}</el-button>
                <el-button v-no-more-click:3000 size="small" type="danger"  @click="confirmFishFile('back', orderDetails)">{{ orderDetails.status.slice(-3) == '答复中' ? '退回答复' : '退回补正' }}</el-button>
              </div>
              <div class="btn-anserve">
                <el-button
                type="warning"
                size="small"
                @click.stop='withdrawCertificate(orderDetails)'
                v-if=' orderDetails.consumer_pay_status == 2 && orderDetails.consumer_pay_img != null'>撤回缴费凭证</el-button>

              <el-button v-if="orderDetails.order && !orderDetails.grades" class="ml10" type="success" size="small" @click="agentRate(orderDetails)" :disabled="orderDetails.order.is_grades != 0">
                案件评分
              </el-button>
              <template v-if="orderDetails.grades">
                <el-button v-if="orderDetails.grades.remark == '' " class="ml10" type="success" size="small" @click="additionalRate(orderDetails)">
                  追加评论
                </el-button>
              </template>
              <!-- {{orderDetails.grades.total_score / 3 > 4.5}} -->
              <el-button v-if="orderDetails.grades && orderDetails.grades.total_score / 3 >= 4.5" type="primary" size="small" @click="reward(orderDetails)">
                打赏
              </el-button>
              <!-- <el-button
                type="success"
                size="small"
                @click.stop='caseStatus(orderDetails)'>专利状态</el-button> -->
              </div>
						</el-row>
					</el-form>
          </el-collapse-item>
          </el-collapse>
				</el-col>
			</el-row>

    <promptMessage ref='promptMessage' @getData ='refresh' />
    <withdrawImg @refresh="refreshAndClose" ref='withdrawImg'></withdrawImg>
    <!-- 打赏 -->
		<reward ref='reward' @refresh="refreshAndClose"></reward>
      <!-- 案件状态 弹窗 -->
      <el-dialog
        title="专利状态"
        :visible.sync="dialogVisible"
        width="30%"
        center
        :append-to-body='true'>
        <span v-if="sq_date != ''" class="condition">
          <span>申&ensp;请&ensp;号：{{application_number}}</span><br />
          <span>申&ensp;请&ensp;日：{{sq_date}}</span><br />
          <span>专利状态：<span style="color:green">{{case_status}}</span></span>
        </span>
        <span v-else>{{case_status}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

		</el-dialog>
  </div>
</template>

<script>
import withdrawImg from './withdraw-img'
import promptMessage from '~/components/promptMessage'
import reward from '../../../myApply/components/reward'
import preImg from '~/components/pre-img'
export default {
  data () {
    return {
      dialogVisible:false,
      case_status:'',
      sq_date:'',
      application_number:'',
      orderDetails: {},
      showRefund3: false,
      opDateMax: 0,
      stepsText: ['等待提交', '已提交国知局', '审查通过', '授权'],
      baseUrl: global.baseurl,
      step_type: 'success',
      replyMessage: ''
    }
  },
  components: {
    promptMessage,
    withdrawImg,
    reward,
    preImg
  },
  methods:{
    // 案件状态
    caseStatus(data){
      if(data.final_status){
        this.dialogVisible = true
        this.case_status = data.final_status.case_status
        this.sq_date = data.final_status.sq_date
        this.application_number = data.final_status.application_number
      }else{
        this.dialogVisible = true
        this.case_status = '暂无专利状态'
        this.sq_date = ''
        this.application_number = ''
      }
    },
    // 打赏
    reward(data) {
      this.$refs['reward'].show(data)
    },
    // 追加评论
    additionalRate (data) {
      this.showRefund3 = false
      this.$emit('additionalRate', data)
    },
    // 撤回缴费凭证
    withdrawCertificate(data) {
      // this.$refs['withdrawImg'].show(data)
      this.$axios.put(`api/finals/${data.id}/revoke_pay_img`).then(
        res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '撤回缴费凭证成功！'
            })
            this.refreshAndClose()
          } else {
            this.$message.error({
              message: res.data.message
            })
          }
        }
      )
    },
    show(data) {
      let params = {
        finals:data.id
      }
      this.$axios.get(`api/finals/${data.id}/show`,{
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.orderDetails = res.data.data;
          this.fileSplit(this.orderDetails)
          if (this.orderDetails.grades) {
            this.orderDetails.grades.attitude = Number(this.orderDetails.grades.attitude)
            this.orderDetails.grades.take_time = Number(this.orderDetails.grades.take_time)
            this.orderDetails.grades.quelity = Number(this.orderDetails.grades.quelity)
          }
          if (this.orderDetails.order.img == null || this.orderDetails.order.img == "") {
            this.orderDetails.imgList = []
            this.orderDetails.imgList2 = []
          } else {
            let img_Arr = this.orderDetails.order.thumb_imgs.split("&");
            let img_Arr2 = this.orderDetails.order.img.split('&')
            this.orderDetails.order.imgArr = [];
            this.orderDetails.imgList = [];
            this.orderDetails.imgList2 = []
            for (const i in img_Arr2) {
              this.orderDetails.imgList2.push(global.baseurl + '/storage/upload/' + img_Arr2[i])
            }
            for (const i in img_Arr) {
              let itemobj = {
                id: i + 1,
                path: img_Arr[i],
                file: ''
              };
              this.orderDetails.imgList.push(global.baseurl + '/storage/upload/' + img_Arr[i])
              let itemArr = itemobj.path.split("/")
              itemobj.path = itemArr[itemArr.length - 1]
              itemobj.file = itemArr.slice(0, 2).join("/");
              this.orderDetails.order.imgArr.push(itemobj);
            }
          }
          // console.log(this.orderDetails.imgList)
          // console.log(this.orderDetails.imgList2)
          this.showRefund3 = true
          this.opDateMax = 0
          this.step_type = 'success'
          let list = this.orderDetails.statuss.map(item => item.id).reverse()
          this.stepsText = ['等待提交国知局', '已提交国知局', '补正/答复', '国知局审查中', '授权']
          if(list.includes(23)) {
            this.stepsText = ['等待提交国知局', '已提交国知局', '补正/答复', '国知局审查中', '授权']
            this.opDateMax = 4
          } else if(list.includes(22)) {
            this.stepsText = ['等待提交国知局', '已提交国知局', '补正/答复', '国知局审查中', '驳回']
            this.opDateMax = 4
          } else if(list.includes(26)) {
            this.opDateMax = 3
          } else if(list.includes(20)) {
            this.opDateMax = 2
          } else if(list.includes(19)) {
            this.opDateMax = 1
          } else if(list.includes(8)) {
            this.opDateMax = 0
          }
          if (this.orderDetails.status == '撤案') {
            this.stepsText.splice(this.opDateMax + 1)
            this.stepsText.push('已撤案')
            this.opDateMax ++
            this.step_type = 'error'
          }
        }
      })
      
    },
    openLook () {
    },
    refreshAndClose() {
      this.$emit('refresh')
      this.showRefund3 = false
    },
    refresh () {
      this.$emit('refresh')
    },
    agentRate(data) {
      this.showRefund3 = false
      this.$emit('agentRate', data)
    },
    confirmFishFile(val, pData) {
      if (val == 'confirm') {
        let params = {
          finals: pData.id
        }
        this.$axios.get(`api/finals/${pData.id}/consumer/confirm`, {params: params})
        .then (res => {
          if(res.data.code == '200') {
            // let showMessageData = {
            //   order_id: id,
            //   agentPhone:pData.agent.phone,
            //   processPhone: pData.process.phone,
            //   agentNumber: pData.agent.email_work.split("@")[0].slice(-3),
            //   processNumber: pData.process.email_work.split("@")[0].split("followup")[1],
            // }
            // this.$refs['promptMessage'].showDialog('confirmFishFile',showMessageData)
            // this.getUserData()
            this.$message({
              type: 'success',
              message: '确认订单成功。'
            })
            this.showRefund3 = false
            this.$emit('refresh')
          }
        })
      } else {
        this.$prompt('请输入修改意见', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '修改意见不能为空'
      }).then(({ value }) => {
        let data = {
          id: pData.id,
          modification: value
        }
          this.$axios.get(`api/finals/${pData.id}/consumer/confirm`, {
            params: data
          })
          .then( res => {
            if(res.data.code == '200') {
              this.$message({
                type: 'success',
                message: '退回成功，代理人将根据您的意见修改案件。'
              })
              this.showRefund3 = false
              this.$emit('refresh')
              // let showMessageData = {
              //   agentPhone:pData.agent.phone,
              //   processPhone: pData.process.phone,
              //   agentNumber: pData.agent.email_work.split("@")[0].slice(-3),
              //   processNumber: pData.process.email_work.split("@")[0].split("followup")[1],
              // }
              // this.$refs['promptMessage'].showDialog('confirmFishFileForNo',showMessageData)
              // this.getUserData()
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消退回'
        })
      })
      }
    },
    submit(item) {
      if (this.replyMessage == "") {
        this.$message({
          message: "请输入消息",
          type: "warning"
        });
      } else {
        this.submitPost(item)
      }
    },
    showTextarea(item, index) {
      for(let i = 0; i < this.orderDetails.operations.length; i++) {
        this.orderDetails.operations[i].show_input = false;
        if (i == index) {
          this.orderDetails.operations[i].show_input = true
        }
      }
    },
    submitPost(data) {
      let params = {
        pid: data.id,
        operation_record: this.replyMessage,
        // type: 'inventor'
      }
      this.$axios
        .post(`api/finals/reply_message`, params)
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "回复成功！"
            });
            this.replyMessage = ''
            this.$emit('refresh')
            this.showRefund3 = false
            // this.getData(this.currentPage)
            // setTimeout(() => {
            //   this.$store.commit('setLookOrder', false)
            // }, 300)
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    fileSplit (data) {
      if (data.cert_file) {
        data.certFiles = [];
        let certFile = data.cert_file.split("&");
        for (let j in certFile) {
          let itemobj = {
            id: j + 1,
            path: certFile[j],
            file: ''
          };
          let itemArr = itemobj.path.split("/")
          itemobj.path = itemArr[itemArr.length - 1]
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.certFiles.push(itemobj)
          console.log(data)
        }
      }
    }
  }
}
</script>

<style lang='less'>
  .lookPatentOrder {
    /deep/.lookOrder {
      .el-dialog__header {
        .el-dialog__close {
          z-index: 999;
        }
      }
    }
    .el-step__head.is-success{
      color: #fff;
      border-color: rgba(36,157,255,1);
      .el-step__icon{
        background:rgba(36,157,255,1);
      }
      .el-step__icon.is-text{
        border-color: rgba(36,157,255,1);
      }
      .el-step__line {
        background: rgba(36, 157, 255, 1);
      }
    }
    .el-step__title.is-success{
      color:rgba(85,85,85,1);
    }
    .el-steps {
      margin-bottom:  20px;
      .el-step__main{
        width: 100%;
        .el-step__title {
          text-align: center;
          font-size: 15px;
          width: 100%;
        }
      }
      .el-step:nth-child(odd) {
        .el-step__main{
          position: absolute;
          top: -40px;

        }
      }
      .el-step:nth-child(even) {
        .el-step__main{
          margin-top: 15px;
        }
      }

    }
  }
.lookeOerderFrom {

  .el-form-item {
    height: 100%;
    border:1px solid #ccc;
    margin-right: -1px;
    margin-bottom: -1px;
    .el-form-item__label {
      line-height: 30px;
    }
    .el-form-item__content{
      line-height: 30px;
    }

  }
  .el-row {
    .el-col-12 {
      .el-form-item {
        border-bottom-width: 0;
      }
    }
  }
  .file_sh {
    font-size: 20px;
    margin-right: 40px;
  }
}

.fontgreen {
  color: rgb(73, 150, 124);
  font-weight: 700;
}
.fontRed {
  color: red;
}
.flex-form {
  .el-form-item__content {
    height: 30px;
    display: flex;
    align-items: center;
  }
}
.messageList {
  .messagebox {
    width: 100%;
    background: #eef1f3;
  }

  .messageBackground_l {
    background: #fff;
  }
  .messageBackground_r {
    background: #c9e7ff;
  }
  .item {
    width: 100%;
    margin-bottom: 10px;
    .item_user {
      display: inline-block;
      width: 60px;
      font-size: 16px;
      font-weight: bold;
    }
    .item_message {
      max-width: calc(100% - 170px);
      display: inline-block;
      padding: 10px 15px;
      box-sizing: border-box;
      margin-left: 15px;
      border-radius: 5px;
      vertical-align: top;
      // margin-right: 90px;
    }
    .item_time {
      font-size: 12px;
      display: block;
      padding-left: 80px;
      margin-bottom: 5px;
      color: #ccc;
    }
    .deduction_message {
      margin: 20px 0 0 80px;
      max-width: calc(100% - 170px);
      padding: 10px 15px;
      border-radius: 5px;
    }
  }
  .agent_item {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
    padding-top: 20px;
    .item_user {
      display: inline-block;
      width: 60px;
      font-size: 16px;
      font-weight: bold;
    }
    .item_time {
      position: absolute;
      right: 95px;
      top: 0px;
      font-size: 12px;
      display: block;
      // padding-right: 80px;
      margin-bottom: 5px;
      color: #ccc;
    }
    .item_message {
      max-width: calc(100% - 180px);
      display: inline-block;
      padding: 10px 15px;
      box-sizing: border-box;
      margin-right: 30px;
      border-radius: 5px;
      vertical-align: top;
      // margin-left: 80px;
    }
  }
}
// .el-collapse {
//   .el-collapse-item {
//     .el-collapse-item__content {
//       max-height: 1000px;
//       overflow-y: auto;
//     }
//   }
// }
.icon-fileload {
  display:block;
  width: 18px;
  height: 24px;
  margin-top: 3px;
  background:url('../../../../../assets/img/图标.png') no-repeat;
  background-position:-353px -317px;
}
.el-step__icon.is-text{
  border:1px solid rgba(181,181,181,1);
}
.el-form-item{
  margin-right: 0px !important;
}
.btn-anserve{
  margin-left: 15px;
}
.condition{
  font-size: 15px;
}
.pre-img{
  margin-top: 4px;
}
</style>
